/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->

    <el-button-group style="margin-top: 20px">
      <el-button
        v-permission="['add', $route]"
        type="primary"
        icon="el-icon-plus"
        @click="btnoperation('新增菜单', 1)"
        >新增</el-button
      >
      <el-button
        v-permission="['edit', $route]"
        type="primary"
        icon="el-icon-tickets"
        @click="btnoperation('修改菜单', 2)"
        >修改</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-delete"
        v-permission="['del', $route]"
        @click="deloperation()"
        >删除</el-button
      >
    </el-button-group>
    <el-row>
      <el-table
        :height="heigth"
        ref="singleTable"
        :data="tData"
        style="width: 100%; margin-top: 10px"
        row-key="GuId"
        border
        default-expand-all
        highlight-current-row
        @current-change="handleCurrentChange"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- <el-table-column prop="" label="操作" width="80"> 
          
        </el-table-column> -->
        <el-table-column prop="Name" label="菜单名称" sortable width="180">
        </el-table-column>
        <el-table-column prop="Address" label="菜单地址" sortable width="180">
        </el-table-column>
        <el-table-column prop="" label="图标">
          <template slot-scope="scope">
            <div style="display: flex">
              <p>{{ scope.row.Icon }}</p>
              <i
                :class="scope.row.Icon"
                style="margin-top: 6%; margin-left: 30px"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="功能列表">
          <template slot-scope="scope">
            <el-tag
              v-for="item in scope.row.Btnlis"
              :key="item.GuId"
              style="margin-left: 10px"
              >{{ item.Name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="Sort" label="排序"> </el-table-column>
      </el-table>
    </el-row>

    <el-dialog
      :title="titlename"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input v-model="form.Name"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select class="select" v-model="form.ParentId" ref="select">
            <el-option class="option" :label="optionname" :value="optionkey">
              <el-tree
                ref="selecteltree"
                node-key="Id"
                :data="treedata"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单类型">
          <el-select v-model="form.Type" placeholder="菜单类型">
            <el-option label="expand" value="expand"></el-option>
            <el-option label="iframe" value="iframe"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单地址" v-if="form.Type == 'iframe'">
          <el-input v-model="form.Address"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-row style="display: flex">
            <el-input v-model="form.Icon" style="width: 95%"></el-input>
            <i
              :class="form.Icon"
              style="
                width: 5%;
                height: 40px;
                line-height: 40px;
                font-size: 30px;
              "
            ></i>
            <el-button style="width: 80px" @click="iconDialogVisible = true"
              >Icon</el-button
            >
          </el-row>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.Sort"></el-input>
        </el-form-item>
        <el-form-item label="按钮功能" v-show="form.Type == 'iframe'">
          <el-table border style="width: 100%" :data="Btnlis">
            <el-table-column prop="" label="名称" width="180">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.Name"
                  placeholder="请输入按钮名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="" label="编号" width="180">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.Number"
                  placeholder="请输入编号"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot="header">
                <el-button type="primary" size="mini" @click="Btnlisadd">
                  新增
                </el-button>
              </template>
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="delBtnlis(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnadd()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="icon列表"
      :visible.sync="iconDialogVisible"
      :append-to-body="true"
      width="80%"
      height="80%"
      center
      class="spec-dialog"
      :close-on-click-modal="false"
    >
      <ul class="icon-list" id="test">
        <li v-for="item in icons" :key="item" @click="liclick($event)">
          <span>
            <i :class="item"></i>
            <span class="icon-name">{{ item }}</span>
          </span>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import { req, reqjson } from "@/api/axiosFun";
import Axios from "axios";
export default {
  // components: { treeselect },
  data() {
    return {
      list: [],
      showdelete: false,
      tData: [],
      treedata: [],
      logining: false,
      defaultProps: {
        children: "children",
        label: "Name",
      },
      form: {
        Name: "",
        Address: "",
        Type: "",
        Icon: "",
        Sort: 0,
        ParentId: 0,
        GuId: "",
      },
      Btnlis: [],
      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: "请选择父级菜单", trigger: "blur" },
        ],
        moduleName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        moduleIcon: [
          { required: true, message: "请输入菜单图标", trigger: "blur" },
        ],
        moduleUrl: [{ required: true, message: "请输入URL", trigger: "blur" }],
        moduleOrder: [
          { required: true, message: "请输入菜单顺序", trigger: "blur" },
        ],
      },
      centerDialogVisible: false,
      iconDialogVisible: false,
      titlename: "新增菜单",
      optionname: "顶级",
      optionkey: 0,
      heigth:0,
      icons: [
        "el-icon-platform-eleme",
        "el-icon-eleme",
        "el-icon-delete-solid",
        "el-icon-delete",
        "el-icon-s-tools",
        "el-icon-setting",
        "el-icon-user-solid",
        "el-icon-user",
        "el-icon-phone",
        "el-icon-phone-outline",
        "el-icon-more",
        "el-icon-more-outline",
        "el-icon-star-on",
        "el-icon-star-off",
        "el-icon-s-goods",
        "el-icon-goods",
        "el-icon-warning",
        "el-icon-warning-outline",
        "el-icon-question",
        "el-icon-info",
        "el-icon-remove",
        "el-icon-circle-plus",
        "el-icon-success",
        "el-icon-error",
        "el-icon-zoom-in",
        "el-icon-zoom-out",
        "el-icon-remove-outline",
        "el-icon-circle-plus-outline",
        "el-icon-circle-check",
        "el-icon-circle-close",
        "el-icon-s-help",
        "el-icon-help",
        "el-icon-minus",
        "el-icon-plus",
        "el-icon-check",
        "el-icon-close",
        "el-icon-picture",
        "el-icon-picture-outline",
        "el-icon-picture-outline-round",
        "el-icon-upload",
        "el-icon-upload2",
        "el-icon-download",
        "el-icon-camera-solid",
        "el-icon-camera",
        "el-icon-video-camera-solid",
        "el-icon-video-camera",
        "el-icon-message-solid",
        "el-icon-bell",
        "el-icon-s-cooperation",
        "el-icon-s-order",
        "el-icon-s-platform",
        "el-icon-s-fold",
        "el-icon-s-unfold",
        "el-icon-s-operation",
        "el-icon-s-promotion",
        "el-icon-s-home",
        "el-icon-s-release",
        "el-icon-s-ticket",
        "el-icon-s-management",
        "el-icon-s-open",
        "el-icon-s-shop",
        "el-icon-s-marketing",
        "el-icon-s-flag",
        "el-icon-s-comment",
        "el-icon-s-finance",
        "el-icon-s-claim",
        "el-icon-s-custom",
        "el-icon-s-opportunity",
        "el-icon-s-data",
        "el-icon-s-check",
        "el-icon-s-grid",
        "el-icon-menu",
        "el-icon-share",
        "el-icon-d-caret",
        "el-icon-caret-left",
        "el-icon-caret-right",
        "el-icon-caret-bottom",
        "el-icon-caret-top",
        "el-icon-bottom-left",
        "el-icon-bottom-right",
        "el-icon-back",
        "el-icon-right",
        "el-icon-bottom",
        "el-icon-top",
        "el-icon-top-left",
        "el-icon-top-right",
        "el-icon-arrow-left",
        "el-icon-arrow-right",
        "el-icon-arrow-down",
        "el-icon-arrow-up",
        "el-icon-d-arrow-left",
        "el-icon-d-arrow-right",
        "el-icon-video-pause",
        "el-icon-video-play",
        "el-icon-refresh",
        "el-icon-refresh-right",
        "el-icon-refresh-left",
        "el-icon-finished",
        "el-icon-sort",
        "el-icon-sort-up",
        "el-icon-sort-down",
        "el-icon-rank",
        "el-icon-loading",
        "el-icon-view",
        "el-icon-c-scale-to-original",
        "el-icon-date",
        "el-icon-edit",
        "el-icon-edit-outline",
        "el-icon-folder",
        "el-icon-folder-opened",
        "el-icon-folder-add",
        "el-icon-folder-remove",
        "el-icon-folder-delete",
        "el-icon-folder-checked",
        "el-icon-tickets",
        "el-icon-document-remove",
        "el-icon-document-delete",
        "el-icon-document-copy",
        "el-icon-document-checked",
        "el-icon-document",
        "el-icon-document-add",
        "el-icon-printer",
        "el-icon-paperclip",
        "el-icon-takeaway-box",
        "el-icon-search",
        "el-icon-monitor",
        "el-icon-attract",
        "el-icon-mobile",
        "el-icon-scissors",
        "el-icon-umbrella",
        "el-icon-headset",
        "el-icon-brush",
        "el-icon-mouse",
        "el-icon-coordinate",
        "el-icon-magic-stick",
        "el-icon-reading",
        "el-icon-data-line",
        "el-icon-data-board",
        "el-icon-pie-chart",
        "el-icon-data-analysis",
        "el-icon-collection-tag",
        "el-icon-film",
        "el-icon-suitcase",
        "el-icon-suitcase-1",
        "el-icon-receiving",
        "el-icon-collection",
        "el-icon-files",
        "el-icon-notebook-1",
        "el-icon-notebook-2",
        "el-icon-toilet-paper",
        "el-icon-office-building",
        "el-icon-school",
        "el-icon-table-lamp",
        "el-icon-house",
        "el-icon-no-smoking",
        "el-icon-smoking",
        "el-icon-shopping-cart-full",
        "el-icon-shopping-cart-1",
        "el-icon-shopping-cart-2",
        "el-icon-shopping-bag-1",
        "el-icon-shopping-bag-2",
        "el-icon-sold-out",
        "el-icon-sell",
        "el-icon-present",
        "el-icon-box",
        "el-icon-bank-card",
        "el-icon-money",
        "el-icon-coin",
        "el-icon-wallet",
        "el-icon-discount",
        "el-icon-price-tag",
        "el-icon-news",
        "el-icon-guide",
        "el-icon-male",
        "el-icon-female",
        "el-icon-thumb",
        "el-icon-cpu",
        "el-icon-link",
        "el-icon-connection",
        "el-icon-open",
        "el-icon-turn-off",
        "el-icon-set-up",
        "el-icon-chat-round",
        "el-icon-chat-line-round",
        "el-icon-chat-square",
        "el-icon-chat-dot-round",
        "el-icon-chat-dot-square",
        "el-icon-chat-line-square",
        "el-icon-message",
        "el-icon-postcard",
        "el-icon-position",
        "el-icon-turn-off-microphone",
        "el-icon-microphone",
        "el-icon-close-notification",
        "el-icon-bangzhu",
        "el-icon-time",
        "el-icon-odometer",
        "el-icon-crop",
        "el-icon-aim",
        "el-icon-switch-button",
        "el-icon-full-screen",
        "el-icon-copy-document",
        "el-icon-mic",
        "el-icon-stopwatch",
        "el-icon-medal-1",
        "el-icon-medal",
        "el-icon-trophy",
        "el-icon-trophy-1",
        "el-icon-first-aid-kit",
        "el-icon-discover",
        "el-icon-place",
        "el-icon-location",
        "el-icon-location-outline",
        "el-icon-location-information",
        "el-icon-add-location",
        "el-icon-delete-location",
        "el-icon-map-location",
        "el-icon-alarm-clock",
        "el-icon-timer",
        "el-icon-watch-1",
        "el-icon-watch",
        "el-icon-lock",
        "el-icon-unlock",
        "el-icon-key",
        "el-icon-service",
        "el-icon-mobile-phone",
        "el-icon-bicycle",
        "el-icon-truck",
        "el-icon-ship",
        "el-icon-basketball",
        "el-icon-football",
        "el-icon-soccer",
        "el-icon-baseball",
        "el-icon-wind-power",
        "el-icon-light-rain",
        "el-icon-lightning",
        "el-icon-heavy-rain",
        "el-icon-sunrise",
        "el-icon-sunrise-1",
        "el-icon-sunset",
        "el-icon-sunny",
        "el-icon-cloudy",
        "el-icon-partly-cloudy",
        "el-icon-cloudy-and-sunny",
        "el-icon-moon",
        "el-icon-moon-night",
        "el-icon-dish",
        "el-icon-dish-1",
        "el-icon-food",
        "el-icon-chicken",
        "el-icon-fork-spoon",
        "el-icon-knife-fork",
        "el-icon-burger",
        "el-icon-tableware",
        "el-icon-sugar",
        "el-icon-dessert",
        "el-icon-ice-cream",
        "el-icon-hot-water",
        "el-icon-water-cup",
        "el-icon-coffee-cup",
        "el-icon-cold-drink",
        "el-icon-goblet",
        "el-icon-goblet-full",
        "el-icon-goblet-square",
        "el-icon-goblet-square-full",
        "el-icon-refrigerator",
        "el-icon-grape",
        "el-icon-watermelon",
        "el-icon-cherry",
        "el-icon-apple",
        "el-icon-pear",
        "el-icon-orange",
        "el-icon-coffee",
        "el-icon-ice-tea",
        "el-icon-ice-drink",
        "el-icon-milk-tea",
        "el-icon-potato-strips",
        "el-icon-lollipop",
        "el-icon-ice-cream-square",
        "el-icon-ice-cream-round",
      ],
    };
  },
  created() {
    this.load();
  },
  computed: {},
  methods: {
    load() {
      this.logining = true;
      this.heigth=window.innerHeight;
      req(
        "post",
        "/SysMenu/GetSysMenu?token=" + this.$jsutils.sessionget("token"),
        {
          token: this.$jsutils.sessionget("token"),
        }
      )
        .then((res) => {
          this.logining = false;
          if (res.success) {
            this.list = res.data.list;
            this.tData = res.data.data;
            this.treedata = [
              {
                Id: 0,
                Name: "顶级",
                children: res.data.data,
              },
            ];
          } else {
            this.$message.error(res.data);
            return false;
          }
        })
        .catch((x) => {});
    },

    btnoperation(titlename, type) {
      if (type == 1) {
        this.$refs.singleTable.setCurrentRow(null);
        //新增
        this.form = {
          Name: "",
          Address: "",
          Type: "",
          Icon: "",
          Sort: 0,
          ParentId: 0,
          GuId: "",
        };
        this.Btnlis = [];
      } else {
        //修改
        if (!this.form.Name) {
          this.$message.error("请选择需要编辑的数据！");
          return false;
        }
        if (this.form.ParentId == "0") {
          this.optionname = "顶级";
          this.optionkey = "0";
        } else {
          this.optionname = this.list.filter((x) => {
            return x.Id == this.form.ParentId;
          })[0].Name;
          this.optionkey = this.form.ParentId;
        }
        this.Btnlis = this.form.Btnlis;
      }
      this.centerDialogVisible = true;
      this.titlename = titlename;
    },
    //删除数据
    deloperation() {
      if (this.$jsutils.isempty(this.form.GuId)) {
        this.$message.error("请选择需要移除的数据！");
        return false;
      }

      this.$confirm("确定要删除当前信息吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          reqjson(
            "post",
            "/SysMenu/DelSysMenu?token=" + this.$jsutils.sessionget("token"),
            { guid: this.form.GuId }
          )
            .then((x) => {
              this.loading = false;
              if (x.success) {
                this.$message.success("操作成功!");
                this.load();
              }
            })
            .catch((x) => {
              this.loading = false;
              this.$message.error(x);
            });
        })
        .catch(() => {});
    },
    liclick(event) {
      this.form.Icon = event.currentTarget.textContent;
      this.iconDialogVisible = false;
    },
    handleNodeClick(v) {
      // this.$refs.selectTree.blur();
      this.optionname = v.Name;
      this.optionkey = v.Id;
      this.form.ParentId = v.Id;
      this.$refs.select.visible = false;
    },

    Btnlisadd() {
      let btnmodel = { Name: "", Number: "" };
      this.Btnlis.push(btnmodel);
    },
    delBtnlis(index) {
      this.Btnlis.splice(index, 1);
    },
    handleCurrentChange(val) {
      this.form = val;
    },
    //保存数据
    btnadd() {
      this.centerDialogVisible = false;
      this.logining = true;

      var obj = {
        lis: this.Btnlis,
        //token:this.$jsutils.sessionget('token'),
        menu: this.form,
      };

      reqjson(
        "post",
        "/SysMenu/Addmenu?token=" + this.$jsutils.sessionget("token"),
        obj
      )
        .then((res) => {
          this.logining = false;
          if (res.success) {
            this.$message.success("操作成功！");
            this.load(); //重新加载数据列表
          } else {
            this.$message.error(res.data);
            return false;
          }
        })
        .catch((x) => {});
    },
  },
};
</script>


<style>
.option {
  height: auto;
  line-height: 1;
  padding: 0;
  background-color: #fff;
}
.tree {
  padding: 4px 20px;
  font-weight: 400;
}
ul.icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border: 1px solid #eaeefb;
  border-radius: 4px;
}
.icon-list li {
  float: left;
  width: 16.66%;
  text-align: center;
  height: 120px;
  line-height: 120px;
  color: #666;
  font-size: 13px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-right: -1px;
  margin-bottom: -1px;
}
.icon-list li span {
  line-height: normal;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  color: #99a9bf;
  transition: color 0.15s linear;
  display: inline-block;
  vertical-align: middle;
}
.icon-list li i {
  display: block;
  font-size: 32px;
  margin-bottom: 15px;
  color: #606266;
  transition: color 0.15s linear;
}
.icon-list li:hover i,
.icon-list li:hover span {
  color: #5cb6ff;
}
.spec-dialog .el-dialog__body {
  padding: 3px 30px;
  overflow-y: auto;
  height: calc(100vh - 140px);
}
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>
 
 